<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <!-- Google fonts - Popppins for copy-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800">
    <!-- orion icons-->
    <link rel="stylesheet" href="/css/orionicons.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/favicon.png?3">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<!-- navbar-->
<div th:replace="publicheader::header"></div>
<div class="d-flex align-items-stretch">
    <div id="sidebar" class="sidebar py-3">
        <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">MAIN
        </div>
        <div th:replace="publicsidebar::sidebar"></div>
    </div>
    <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">

            <div class="col-lg-12 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="text-uppercase mb-0">科目成绩</h6>
                    </div>
                    <div class="card-body">
                        <table class="table card-text">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>学生姓名</th>
                                <th>成绩</th>
                                <th>修改</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each=" sas,sasStat: ${scoreAndStudents}">
                                <td th:text="${sasStat.index + 1}" scope="row"></td>
                                <td th:text="${sas.stuName}"></td>
                                <td th:text="${sas.scoreGrade}"></td>
                                <td>
                                    <div class="col-md-6">
                                        <div class="input-group-append">
                                            <input type="hidden" th:value="${sas.scoreId}">
                                            <input type="text" class="form-control" placeholder="分数">
                                            <span>
                                                <button class="btn btn-success" onclick="modify(this)" type="button">修改</button>
                                            </span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="publicfooter::footer"></div>
    </div>
</div>
<!-- JavaScript files-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper.js/umd/popper.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="/vendor/chart.js/Chart.min.js"></script>
<script src="/js/js.cookie.min.js"></script>
<script src="/js/charts-custom.js"></script>
<script src="/js/front.js"></script>

<script type="text/javascript">

    function modify(obj){

        var p = $(obj).parent().parent();
        var inputs = $(p).children("input");

        var pp = $(p).parent().parent().parent();
        var td = $(pp).children("td");

        var scoreId = $(inputs[0]).val();
        var score = $(inputs[1]).val();

        $.ajax({
            url: "/teacher/modify",
            data: {"scoreId":scoreId,score:score},
            method: "post",
            success: function(data){
                if (data === "success"){
                    alert("修改成功");
                    $(td[2]).html(score);
                    $(inputs[1]).val("");
                }
            }
        })
    }

</script>

</body>
</html>